<template>
  <div>
    <div>
      <CloudSlider id="test" :default-value="30" :disabled="disabled"></CloudSlider>
      <CloudSlider range :default-value="[20, 50]" :disabled="disabled"></CloudSlider>
      Disabled:
      <CloudSwitch size="small" :checked="disabled" @change="handleDisabledChange"></CloudSwitch>
    </div>
  </div>
</template>

<script>
  export default {
    title: '1.基础用法。',
    subTitle: '基本滑动条。当 range 为 true 时，渲染为双滑块。当 disabled 为 true 时，滑块处于不可用状态。',
    data () {
      return {
        disabled: false,
      }
    },
    methods: {
      handleDisabledChange (disabled) {
        this.disabled = disabled;
      },
    }
  }
</script>

<style lang="scss">
  .code-box-demo .ant-slider {
    margin-bottom: 16px;
  }
</style>